<template>
    <div class="fullScreen">
        <m-header :msg="'投注详情'"></m-header>
        <div class="scroll-box he-fv tx-c-222">
            <div class="type">{{ data.lotteryType }}</div>
            <div class="flex-box flex-pj cont-box">
                <div class="tx-s-12 tx-c-666">
                    <div>投注期号：<span class="tx-s-14 tx-c-222">第{{ data.issue }}期</span></div>
                    <div>投注金额：<span class="tx-s-14 tx-c-222">{{ data.ticketPrice }}元</span></div>
                    <div>投注玩法：<span class="tx-s-14 tx-c-222">{{ data.playType }}</span></div>
                    <div>投注号码：<span class="tx-s-14 tx-c-222">{{ data.number }}</span></div>
                    <div>投注信息：<span class="tx-s-14 tx-c-222">{{ data.playInfo }}</span></div>
                    <div v-if="data.openCode">开奖号码：<span class="tx-s-14 tx-c-r">{{ data.openCode }}</span></div>
                </div>
                <div class="mar-tr tx-s-20 tx-c-r" v-if="data.openState == '1'">+{{ data.totalPrize }}元</div>
                <div class="icon" :class="icon[data.openState]" v-else></div>
            </div>
            <div class="tx-s-12 tx-c-666 mar-l">
                <div>投注时间：<span class="tx-s-14 tx-c-222">{{ data.createTime }}</span></div>
                <div>方案编号：<span class="tx-s-14 tx-c-222">{{ data.orderNo }}</span></div>
            </div>
            <div class="padd-1 mar-t-1">
                <div class="submit-btn" @click="toLottery">继续投注</div>
            </div>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    import 'common/css/user.css'
    import { mapGetters } from 'vuex'
    import MHeader from '../../components/m-header'
    import { ticketsDetails } from '../../common/js/axiosUtil' 
    export default {
        data () {
            return {
                data : '',
                icon : [
                    'wkj', 'ycp', 'wzj', '', 'wcg'
                    // 0=>'等开奖',1=>'中奖',2=>'未中奖',4=>'未成功'
                ]
            }
        },
        created () {
            this.getTicketsDetails()
        },
        methods: {
            getTicketsDetails () {
                this.$toast('加载中...', 1000000)
                let time = JSON.stringify(new Date().getTime())
                let token = this.md5(time + '4baea6bc1bd66a7e00aa778d4aca6720')
                let ticketNo = this.$route.query.id
                let params = new URLSearchParams()
                params.append('timeStamp', time)
                params.append('token', token)
                params.append('uid', this.bfUserInfo.uid)
                params.append('ticketNo', ticketNo)
                ticketsDetails(params)
                .then((response)=> {
                    this.$toastClose()
                    if(response.data.code == "200"){
                        let data = response.data.data
                        this.data = data
                    } else {
                        this.$logAgain(response.data.msg)
                    }
                })
                .catch((error)=> {
                    this.$toast('请求服务失败', 2000)
                })
            },
            toLottery () {
                this.$router.push('/recommend')//待调整 跳转购彩页面
            }
        },
        components: {
            MHeader
        },
        computed: {
            ...mapGetters({
                bfUserInfo : 'bfUserInfo'
            })
        }
    }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
    .scroll-box
        position: fixed
        width: 100%
        top: 2.75rem
        bottom: 0
        background: $color-w
        overflow: auto
    .scroll-box::-webkit-scrollbar
        display: none
    .type
        padding: 1rem
        background: white
    .cont-box
        margin: .75rem
        padding: .5rem
        background: white
        line-height: 2rem
        .mar-tr
            margin: .5rem .75rem 0 0
        .icon
            width: 5.125rem
            height: 2rem
            margin: .5rem .5rem 0 0
            background-repeat: no-repeat
            background-size: 100% 100%
        .wkj
            background-image: url('../../common/image/zj_tzxq_wkj.png')
        .wcg
            background-image: url('../../common/image/zj_tzxq_wcg.png')
        .wzj
            background-image: url('../../common/image/zj_tzxq_wzj.png')
        .ycp
            background-image: url('../../common/image/zj_tzxq_ycp.png')
    .mar-l
        margin-left: 1.25rem
        line-height: 1.25rem
</style>

